<template>
  <avue-form style="width: 100%" v-model="timeSettingForm"
             @submit="submit"
             :option="timeSettingOption"></avue-form>
</template>

<script>
import {reactive, toRefs} from "vue";
import {processAppConfig} from "@/util/appConfigUtil";

const appConfig = processAppConfig()

export default {
  name: "ExamTimeSettingForm",
  props: {
    data: {
      type: Object,
      default() {
        return {
          ...appConfig.arrangeConfig.globalTimeSetting
        }
      }
    }
  },
  watch: {
    data: {
      handler(newData, oldData) {
        console.log(newData, oldData)
        this.timeSettingForm = newData
      },
      immediate: true,
      // 开启深度监听 deep
      deep: true

    }
  },
  setup(props, {emit}) {
    // const emit = defineEmits(['submit'])
    const topData = reactive({
      showTimeSetting: true,

      timeSettingForm: {},
      timeSettingOption: {
        labelWidth: 80,
        column: [
          {
            row: true,
            span: 24,
            label: "考试日期",
            type: "dates",
            prop: 'examDates',
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD',
            startPlaceholder: '时间日期开始范围自定义',
            endPlaceholder: '时间日期结束范围自定义',
          },
          {
            label: "起止时间",
            prop: 'examTimeRange',
            type: 'timerange',
            format: 'HH:mm',
            row: true,
            span: 24,
            valueFormat: 'HH:mm',
            startPlaceholder: '时间开始范围自定义',
            endPlaceholder: '时间结束范围自定义',
            tip: "每一天开始考试的时间和考试结束的时间 用于时间自动分配"
          },
          {
            label: "考试间隔",
            prop: "examTimeSpan",
            type: "time",
            format: 'HH小时:mm分钟',
            valueFormat: 'HH:mm',
            row: true,
            span: 24,
          },
          {
            label: "考试时长",
            prop: "examTimeStep",
            valueFormat: 'HH:mm',
            type: "time",
            format: 'HH小时:mm分钟',
            row: true,
            span: 24,
          },
          {
            label: "排除时间",
            prop: 'excludeTimeRanges',
            type: 'dynamic',
            row: true,
            span: 24,
            children: {
              column: [
                {
                  label: "排除时间",
                  prop: 'excludeTimeRange',
                  type: 'timerange',
                  format: 'HH:mm',
                  row: true,
                  span: 24,
                  valueFormat: 'HH:mm',
                  startPlaceholder: '时间开始范围自定义',
                  endPlaceholder: '时间结束范围自定义',
                  tip: "每一天开始考试的时间和考试结束的时间 用于时间自动分配",
                }],
            }
          },
        ]
      }


    })

    function submit(form, done) {
      console.log(form)
      emit("submit", form)
      done()
    }

    return {
      ...toRefs(topData),
      submit
    }
  }
}
</script>

<style scoped>

</style>